<div class="col-md-3">
  <div ng-include="'views/mybatis/templates/sidebar.html'"></div>
</div>
<div class="col-md-9" ng-init="vm.init()">
  <h3 class="page-header">SQL Mapper</h3>
  <form name="form" class="form-check" ng-submit="vm.generateSqlMapper(form.$valid)" novalidate>
    <div class="row">
      <div class="form-group col-md-3">
        <label class="control-label">Host</label>
        <input class="form-control" name="host" ng-model="vm.params.host" autofocus required placeholder="127.0.0.1">
        <p class="alert alert-danger" ng-show="form.$submitted && form.host.$error.required">
          <i class="glyphicon glyphicon-info-sign"></i> Host is required</p>
      </div>
      <div class="form-group col-md-2">
        <label class="control-label">Port</label>
        <input type="number" name="port" min="1" max="65535" ng-model="vm.params.port" class="form-control" required
              placeholder="3306">
        <p class="alert alert-danger" ng-show="form.$submitted && form.port.$error.required">
          <i class="glyphicon glyphicon-info-sign"></i> Port is required</p>
        <p class="alert alert-danger" ng-show="form.$submitted && (form.port.$error.min || form.port.$error.max)">
          <i class="glyphicon glyphicon-info-sign"></i> Port must be between 1 and 65535</p>
      </div>
      <div class="form-group col-md-3">
        <label class="control-label">Database</label>
        <input class="form-control" name="database" ng-model="vm.params.database" required placeholder="Database Name">
        <p class="alert alert-danger" ng-show="form.$submitted && form.database.$error.required">
          <i class="glyphicon glyphicon-info-sign"></i> Database is required</p>
      </div>
      <div class="form-group col-md-4">
        <label class="control-label">Table</label>
        <input class="form-control" name="table" ng-model="vm.params.table" required placeholder="Table Name">
        <p class="alert alert-danger" ng-show="form.$submitted && form.table.$error.required">
          <i class="glyphicon glyphicon-info-sign"></i> Table is required</p>
      </div>
    </div>
    <div class="row">
      <div class="form-group col-md-3">
        <label class="control-label">User</label>
        <input class="form-control" name="user" ng-model="vm.params.user" required placeholder="User Name">
        <p class="alert alert-danger" ng-show="form.$submitted && form.user.$error.required">
          <i class="glyphicon glyphicon-info-sign"></i> User is required</p>
      </div>
      <div class="form-group col-md-3">
        <label class="control-label">Password</label>
        <input class="form-control" type="password" name="password" ng-model="vm.params.password" required
            placeholder="Password">
        <p class="alert alert-danger" ng-show="form.$submitted && form.password.$error.required">
          <i class="glyphicon glyphicon-info-sign"></i> Password is required</p>
      </div>
    </div>
    <div class="row">
      <div class="form-group col-md-12">
        <label class="control-label">SQL Mapper Template</label>
        <textarea id="param" class="form-control" rows="15" name="template" ng-model="vm.template" required></textarea>
        <p class="alert alert-danger" ng-show="form.$submitted && form.template.$error.required">
          <i class="glyphicon glyphicon-info-sign"></i> SQL mapper template is required</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <button type="submit" class="btn btn-primary">Generate SQL Mapper</button>
        <button id="copy" type="button" class="btn btn-success" data-clipboard-action="copy"
              data-clipboard-target="#code">Copy SQL Mapper</button>
        <button type="button" class="btn btn-danger" ng-click="vm.clearAll()">Clear All</button>
      </div>
    </div>
  </form>
  <br>
  <div ng-show="vm.sqlMapper != ''">
    <label>SQL Mapper</label>
    <pre id="code" class="code">{{vm.sqlMapper}}</pre>
  </div>
</div>
